import React, { useEffect, useRef, useState } from 'react'
import { Table } from 'antd'
import type { TableColumnsType } from 'antd'
import style from './index.module.scss'

interface DataType {
  [key: string]: any
}

const TableComponent: React.FC<{
  columns: TableColumnsType<DataType> | any
  dataSource: DataType[]
  total: number // 总数
  current: number // 当前页码
  pageSize: number // 每页条数
  [key: string]: any
}> = (props) => {
  let contentRef = useRef<HTMLDivElement>(null)
  let [tableHeight, setTableHeight] = useState(0)

  useEffect(() => {
    if (contentRef.current) {
      setTableHeight(contentRef.current.offsetHeight - 110)
    }
  }, [tableHeight])

  const { total, current, pageSize } = props

  return (
    <div ref={contentRef} className={style.tableContent}>
      <Table
        {...props}
        pagination={{
          defaultPageSize: 10,
          defaultCurrent: 1,
          showSizeChanger: true,
          pageSizeOptions: [10, 20, 50],
          total,
          current,
          pageSize,
        }}
        scroll={{ x: 'max-content', y: tableHeight }}
      />
    </div>
  )
}

export default TableComponent
